import React, { Component } from 'react'
import styles from './home.module.scss'
// import "./home.scss"
import SearchInput from "../searchInput/SearchInput"
import { getHomeCarousel, getHomeNavItmes, getHomePicList } from '../../data/api'
import { Carousel } from 'antd-mobile';
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
class Home extends Component {
    state = {
        carouselList: [],//首页轮播图数据
        navItems: [],//首页导航栏数据
        picList: [], //首页图片列表数据
    }
    //挂载时
    async componentDidMount() {
        //获取轮播图的数据
        let carouselList = await getHomeCarousel();
        //获取导航栏数据
        let navItems = await getHomeNavItmes();
        //获取首页图片列表
        let picList = await getHomePicList();
        // console.log(navItems);
        // console.log(carouselList);
        // console.log(picList);
        this.setState((prevState) => {
            return {
                carouselList: carouselList.message,
                navItems: navItems.message,
                picList: picList.message
            }
        })
    }
    //点击轮播图片，跳转到相应的详情页
    goToDetail = (goods_id) => {
        this.props.history.push('/goodDetail/' + goods_id);
    }
    //点击分类，跳转到分类列表
    goToCategory = () => {
        this.props.history.push('/category');
    }
    goToGoodList = () => {
        this.props.history.push('goodList?query=' + "服装");
    }

    render() {
        return (

            <div className={styles.homeContainner}>
                {/* 首页标题开始 */}
                <div className={styles.homeTitle}>
                    <span className={styles.title}>{this.props.title}</span>
                </div>
                {/* 首页标题结束 */}

                <div className={styles.homeContent}>
                    {/* 首页搜索开始 */}
                    <SearchInput></SearchInput>
                    {/* 首页搜索结束 */}
                    {/* 首页轮播图开始 */}

                    <div>
                        <Carousel
                            autoplay={true}
                            infinite
                        // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                        // afterChange={index => console.log('slide to', index)}
                        >
                            {this.state.carouselList.map(val => (
                                <img
                                    onClick={this.goToDetail.bind(this, val.goods_id)}
                                    key={val.image_src}
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            ))}
                        </Carousel>
                    </div>
                    {/* 首页轮播图结束 */}
                    {/* 首页导航栏开始 */}
                    <div className={styles.homeNav}>
                        {
                            this.state.navItems.map((v, i) => {
                                return <div className={styles.homeNavItem} key={v.image_src} onClick={this.goToCategory}>
                                    <img src={v.image_src} alt="" />
                                </div>
                            })
                        }
                    </div>
                    {/* 首页导航栏结束 */}
                    {/* 首页商品数据开始 */}
                    <div className={styles.homePicList}>
                        {
                            this.state.picList.map((v, i) => {
                                return <div className={styles.picListItem} key={v.floor_title.image_src}>
                                    <div className={styles.picTitle}>
                                        <img src={v.floor_title.image_src} alt="" />
                                    </div>
                                    <div className={styles.picList}>
                                        {
                                            v.product_list.map((item, index) => {
                                                return <div className={styles.img} key={index} onClick={this.goToGoodList}>
                                                    <img src={item.image_src} alt="" />
                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            })
                        }
                    </div>
                    {/* 首页商品数据结束 */}
                </div>

            </div>

        )
    }
}
const mapStateToProps = (state) => {
    return {
        title: state.homeReducer.title
    }
}
export default connect(mapStateToProps,null)(withRouter(Home))